<template>
  <div class="page">
    <div class="pageContainer">
        <div style="background-color:#fff;border:1px solid #ccc">
        <div style="padding:10px 20px;overflow:hidden;background-color:#e7ecee">
          <span style="font-weight:700;float:left">订单基本信息</span>
        </div>
          <!--订单基本信息栏-->
      <div class="basicOrderInformation">
        <!--1/4栏-->
        <div class="orderIndex">
          <!--第一行-->
          <div class="orderIndexList">
            <span>订单编号：</span>
            <span>{{orderDetail.orderNo}}</span>
          </div>
          <!--第二行-->
          <div class="orderIndexList">
            <span>来源终端：</span>
            <span v-if="orderDetail.sources=='1'">APP</span>
            <span v-if="orderDetail.sources=='2'">商城小程序</span>
            <span v-if="orderDetail.sources=='3'">企业微信</span>
            <span v-if="orderDetail.sources=='4'">We2000公众号</span>
            <span v-if="orderDetail.sources=='5'">商城公众号</span>
            <span v-if="orderDetail.sources=='6'">其他</span>
          </div>
          <!--第三行-->
           <div class="orderIndexList">
            <span>下单时间：</span>
            <span>{{orderDetail.buyTime}}</span>
          </div>
          <!--第四行-->
           <div class="orderIndexList">
             <span>支付状态：</span>
            <span v-if="orderDetail.orderStatus =='1'">待支付</span>
            <span v-if="orderDetail.orderStatus =='2'">已支付</span>
          </div>
          <!--第五行-->
          <!-- <div class="orderIndexList">
            <span>收货人身份证号：</span>
            <span></span>
          </div> -->
          <!--第六行-->
          <div class="orderIndexList">
            <span>手机：</span>
            <span>{{orderDetail.consigneePhone}}</span>
          </div>
          <!--第七行-->
          <!-- <div class="orderIndexList">
            <span>客户类型：</span>
            <span></span>
          </div> -->
          <!--第八行-->
          <!-- <div class="orderIndexList">
            <span>第三方支付流水号：</span>
            <span>{{orderDetail.serialNo}}</span>
          </div> -->
        </div>
        <!--2/4栏-->
        <div class="orderIndex">
          <!--第一行-->
          <div class="orderIndexList">
            <span>订单类型：</span>
            <span v-if="orderDetail.orderTypeb =='1'">积分订单</span>
            <span v-if="orderDetail.orderTypeb =='2'">普通订单</span>
          </div>
          <!--第二行-->
          <div class="orderIndexList">
            <span>来源渠道：</span>
            <span v-if="orderDetail.sources=='1'">APP</span>
            <span v-if="orderDetail.sources='2'">商城小程序</span>
            <span v-if="orderDetail.sources=='3'">企业微信</span>
            <span v-if="orderDetail.sources=='4'">We2000公众号</span>
            <span v-if="orderDetail.sources=='5'">商城公众号</span>
            <span v-if="orderDetail.sources=='6'">其他</span>
          </div>
          <!--第三行-->
         <div class="orderIndexList">
            <span>会员手机号：</span>
            <span>{{orderDetail.buyerId}}</span>
          </div>
          <!--第四行-->
          <div class="orderIndexList">
            <span>支付方式：</span>
            <span v-if="orderDetail.payment==1">微信分期</span>
            <span v-if="orderDetail.payment==2">We2000</span>
            <span v-if="orderDetail.payment==3">微信支付</span>
            <span v-if="orderDetail.payment==4">微信银行储蓄卡</span>
          </div>
          <!--第五行-->
          <div class="orderIndexList">
            <span>收货人姓名：</span>
            <span>{{orderDetail.buyerRealname}}</span>
          </div>
          <!--第六行-->
          <!-- <div class="orderIndexList">
            <span>&nbsp;</span>
            <span>&nbsp;</span>
          </div> -->
          <!--第七行-->
          <!-- <div class="orderIndexList">
            <span>客户名称：</span>
            <span>{{orderDetail.buyerUsername}}</span>
          </div> -->
        </div>
        <!--3/4栏-->
        <div class="orderIndex">
          <!--第一行-->
          <div class="orderIndexList">
            <span>订单状态：</span>
            <span v-if="orderDetail.orderStatus =='1'">待支付</span>
            <span v-if="orderDetail.orderStatus =='2'">已支付</span>
            <span v-if="orderDetail.orderStatus =='3'">待发货</span>
            <span v-if="orderDetail.orderStatus =='4'">已发货</span>
            <span v-if="orderDetail.orderStatus =='5'">确认收货</span>
            <span v-if="orderDetail.orderStatus =='6'">待评价</span>
            <span v-if="orderDetail.orderStatus =='7'">已关闭</span>
            <span v-if="orderDetail.orderStatus =='8'">付款处理中</span>
            <span v-if="orderDetail.orderStatus =='9'">已退款</span>
            <span v-if="orderDetail.orderStatus =='10'">已完成</span>
          </div>
          <!--第二行-->
          <div class="orderIndexList">
            <span>订单来源：</span>
            <span v-if="orderDetail.orderSources=='1'">拼团</span>
            <span v-if="orderDetail.orderSources=='2'">秒杀</span>
            <span v-if="orderDetail.orderSources=='3'">预售</span>
            <span v-if="orderDetail.orderSources=='4'">抽奖</span>
          </div>
          <!--第三行-->
          <div class="orderIndexList">
            <span>外部订单编号：</span>
            <span>{{orderDetail.externalOrderCode}}</span>
           <el-button type="primary" size="small" @click="modificationExternalOrderCodeForm()" >修改</el-button>

          </div>
          <!--第四行-->
          <div class="orderIndexList">
            <span>订单标签：</span>
             <span>单买订单</span>
           <!--  <span>{{orderDetail.predictDeliveryTime}}</span>
              <el-button type="primary" size="small" @click="modificationPredictDeliveryTimeForm()" >修改</el-button> -->

          </div>
          <!--第五行-->
          <div class="orderIndexList">
            <span>收货人地址：</span>
             <span>{{orderDetail.receiverAddress}}</span>
            <!-- <span>{{orderDetail.receiverProvinceName}}-{{orderDetail.receiverCityName}}-{{orderDetail.receiverRegionName}} {{orderDetail.receiverAddress}}</span> -->
          </div>
          <!--第六行-->
          <!-- <div class="orderIndexList">
            <span>&nbsp;</span>
            <span>&nbsp;</span>
          </div> -->
          <!--第七行-->
          <!-- <div class="orderIndexList">
            <span>订单序号：</span>
            <span>{{orderDetail.id}}</span>
          </div> -->
        </div>
        <!--4/4栏-->
        <div class="orderIndex">
          <!--第一行-->
          <div class="orderIndexList">
            <span>销售商户：</span>
            <span>{{orderDetail.salesBusiness}}</span>

          </div>
          <!--第二行-->
          <div class="orderIndexList">
             <span>商品类型：</span>
            <span></span>
            <!-- <span>销售渠道：</span>
            <span v-if="orderDetail.saleChannel =='1'">BBC</span>
            <span v-if="orderDetail.saleChannel =='2'">天猫</span>
            <span v-if="orderDetail.saleChannel =='3'">京东</span> -->
          </div>
          <!--第三行-->
          <div class="orderIndexList">
             <span>订单异常状态：</span>
            <span>审核通过</span>
            <!-- <span>下单会员账号：</span>
            <span>{{orderDetail.buyerId}}</span> -->
          </div>
          <!--第四行-->
         <!--  <div class="orderIndexList">
            <span>订单标签:</span>
            <span></span>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
          </div> -->
          <!--
           <div class="orderIndexList">
            <span>外部订单编号：</span>
            <span>{{orderDetail.externalOrderCode}}</span>
            <el-button type="text" @click="dialogVisible = true">修改</el-button>
          </div> -->
          <!--第五行-->
          <!-- <div class="orderIndexList">
            <span>收货人地址：</span>
            <span>{{orderDetail.receiverProvinceName}}-{{orderDetail.receiverCityName}}-{{orderDetail.receiverRegionName}} {{orderDetail.receiverAddress}}</span>
          </div> -->
          <!--第六行-->
          <!-- <div class="orderIndexList">
            <span>&nbsp;</span>
            <span>&nbsp;</span>
          </div> -->
          <!--第七行-->
          <!-- <div class="orderIndexList">
            <span>供应商：</span>
            <span>自营供应商</span>
          </div> -->
        </div>

        <div class="tool-wrap">
                <!-- 修改修改人收货信息 -->
                <el-dialog title="修改人收货信息" :visible.sync="dialogVisible">
                    <el-form :model="orderDetail" ref="orderDetail" :rules="rules">
                      <el-row :gutter="21">
                        <el-col :span="10">
                          <el-form-item label="收货人姓名"  prop="buyerRealname">
                              <el-input v-model="orderDetail.buyerRealname" style="width: 12rem;" type="text" auto-complete="off"   show-word-limit></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="10">
                          <el-form-item label="收货人手机号"  prop="consigneePhone">
                              <el-input v-model="orderDetail.consigneePhone" style="width: 12rem;" type="text" auto-complete="off"   show-word-limit></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    <el-row  :gutter="21">
                      <el-col :span="20">
                        <el-form-item label="收货人地址" prop="" >
                            <v-distpicker  :province="orderDetail.receiverProvinceName" @province="changeProvince" :city="orderDetail.receiverCityName" @city="changeCity" :area="orderDetail.receiverRegionName" @area="changeArea"></v-distpicker>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                    <el-col :span="20">
                      <el-form-item label="" prop="receiverAddress">
                          <el-input v-model="orderDetail.receiverAddress"  style="width: 35rem;padding-left:12%" auto-complete="off" placeholder="请输入详细地址"></el-input>
                      </el-form-item>
                      </el-col>
                    </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="summitModificationConsigneeForm(2)">确 定</el-button>
                    </div>
                </el-dialog>
          </div>
          <div>
             <!-- 修改预计发货日期 -->
                 <el-dialog title="修改预计发货日期" :visible.sync="dialogVisible1">
                    <el-form :model="orderDetail" ref="orderDetail" :rules="rules">
                    <el-form-item label="预计发货日期"  width="100%"  prop="predictDeliveryTime">
                        <!-- <el-input v-model="orderDetail.predictDeliveryTime" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input> -->
                      <el-date-picker v-model="orderDetail.predictDeliveryTime" type="datetime" placeholder="预计发货日期">
                                </el-date-picker>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="summitModificationPredictDeliveryTimeForm(2)">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
             <div>
             <!-- 修改外部订单号 -->
                 <el-dialog title="修改外部订单号" :visible.sync="dialogVisible2">
                    <el-form :model="orderDetail" ref="orderDetail" :rules="rules">
                    <el-form-item label="预计外部订单号"  width="100%"  prop="externalOrderCode">
                      <el-input v-model="orderDetail.externalOrderCode" auto-complete="off" placeholder=""></el-input>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="summitModificationExternalOrderCodeForm(2)">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
         </div>
                <div class="left-area" v-show="true">
                <el-button-group>
                    <el-button type="primary" size="small" @click="modificationConsigneeForm()" >修改收货人信息</el-button>
                </el-button-group>
              </div>
        </div>


      <!--订单详细信息栏-->
      <el-row class="orderDetails">
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
          <el-tab-pane name="productInfo" label="商品明细">
            <order-detail-product :order-no="orderNo"></order-detail-product>
          </el-tab-pane>

          <el-tab-pane name="payInfo" label="支付信息">
            <!-- <order-detail-pay :order-no="orderNo"></order-detail-pay> -->
              <el-table
                :data="orderPayDetailData"
                style="width: 100%"
                :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
                :size="size"
                align="center"
                header-align="center" stripe>
                <el-table-column prop="payWay" label="支付方式" width="280">
                   <!-- <template slot-scope="scope">
                           <span v-if="scope.row.payWay=='1'">微信支付</span>
                            <span v-if="scope.row.payWay=='2'">支付宝</span>
                            <span v-if="scope.row.payWay=='3'">银联</span>
                            <span v-if="scope.row.payWay=='4'">现金</span>
                            <span v-if="scope.row.payWay=='5'">积分</span>
                            <span v-if="scope.row.payWay=='6'">优惠券</span>
                        </template> -->
                </el-table-column>
                <el-table-column prop="payAmount" label="支付金额" width="280"></el-table-column>
                <el-table-column prop="paymentPreference" label="支付优惠"></el-table-column>
                <el-table-column prop="payAskTime" label="支付时间"></el-table-column>
                <el-table-column prop="payAskNo" label="支付流水号"></el-table-column>
              </el-table>

             <!--支付信息分页-->
            <el-pagination
              layout="total, prev, pager, next, jumper,sizes"
              style="float:right;"
              @current-change="handleCurrentChangeOperationInfo1"
              @size-change="handleSizeChangeOperationInfo1"
              :current-page="orderPayDetailPage.start"
              :page-size="orderPayDetailPage.limit"
              :total="orderPayDetailTotal"
              :page-sizes="[10, 20, 30, 40]"></el-pagination>
          </el-tab-pane>

          <!-- <el-tab-pane name="deliveryInfo" label="交货单信息">
            <el-table :data="deliverData"
                      style="width: 100%"
                      :size="size"
                      align="center"
                      header-align="center"
                      :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
              <el-table-column label="操作" min-width="180"></el-table-column>
              <el-table-column prop="deliverNo" label="交货单号" min-width="180"></el-table-column>
              <el-table-column prop="orderStatus" label="交货单状态" min-width="180">
                <template slot-scope="scope">
                  <span v-if="scope.row.orderStatus =='1'">待支付</span>
                  <span v-if="scope.row.orderStatus =='2'">已支付</span>
                  <span v-if="scope.row.orderStatus =='3'">待发货</span>
                  <span v-if="scope.row.orderStatus =='4'">已发货</span>
                  <span v-if="scope.row.orderStatus =='5'">确认收货</span>
                  <span v-if="scope.row.orderStatus =='6'">待评价</span>
                  <span v-if="scope.row.orderStatus =='7'">已关闭</span>
                  <span v-if="scope.row.orderStatus =='8'">付款处理中</span>
                  <span v-if="scope.row.orderStatus =='9'">已退款</span>
                  <span v-if="scope.row.orderStatus =='10'">已完成</span>
                </template>
              </el-table-column>
              <el-table-column prop="warehouseName" label="发货仓库" min-width="180"></el-table-column>
              <el-table-column prop="createTime" label="交货单创建时间" min-width="180"></el-table-column>
              <el-table-column prop="deliveryTime" label="预计发货日期" min-width="180"></el-table-column>
            </el-table>
          </el-tab-pane> -->

          <el-tab-pane name="logisticsInfo" label="物流详情">
            <order-detail-logistics :order-no="orderNo"></order-detail-logistics>
          </el-tab-pane>

          <el-tab-pane name="invoiceInfo" label="发票信息">
            <el-button type="primary" @click="dialogFormVisible = true">增开发票</el-button>
            <!--发票信息-->
            <div style="border:1px solid #ccc;margin-bottom:20px">
              <div
                style="background-color:#f0f3f4;text-align:left;padding:10px 20px;font-weight:700;margin-bottom:30px;border-bottom:1px solid #ccc">
                <span>发票信息</span>
              </div>
              <div style="padding:0 0 20px 100px;text-align:left">
                <div style="margin-bottom:20px">
                  <span>是否需要开票：</span>
                  <span>是</span>
                </div>
                <div style="margin-bottom:20px">
                  <span>发票类型：</span>
                  <el-tag  type="danger">增值税电子发票</el-tag>
                </div>
                 <el-divider></el-divider>
                  <div style="margin-bottom:20px">
                  <span>抬头类型：</span>
                  <el-tag  type="danger">个人</el-tag>
                </div>
                 <el-divider></el-divider>
                <div style="margin-bottom:20px">
                  <span>发票抬头：</span>
                  <span>银子</span>
                </div>
                <div style="margin-bottom:20px">
                  <span>发票内容：</span>
                  <span>明细</span>
                </div>
                 <el-divider></el-divider>
                <div style="margin-bottom:20px">
                  <span>发往邮箱：</span>
                  <span>123456@qq.com</span>
                </div>
                <div style="margin-bottom:20px">
                  <span>开票状态：</span>
                  <span>待开票</span>
                </div>
              </div>
            </div>

          </el-tab-pane>

            <el-tab-pane name="afterSaleInfo" label="售后信息">
           	<el-table :data="afterSaleData"
			          :size="size"
			          style="width: 100%"
			          align="center"
			          header-align="center"
			          :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
                  <el-table-column prop="afterSaleNo" label="售后单编号" width="200"></el-table-column>
                  <el-table-column prop="afterSaleType" label="售后类型" >
                    <template slot-scope="scope">
                                    <span v-if="scope.row.afterSaleType=='1'">仅退款未发货</span>
                                      <span v-if="scope.row.afterSaleType=='2'">仅退款已发货</span>
                                      <span v-if="scope.row.afterSaleType=='3'">退款退货</span>
                        <span v-if="scope.row.afterSaleType=='4'">换货</span>
                                  </template>
                  </el-table-column>
                  <!-- <el-table-column prop="status" label="售后单状态" :formatter="statusFormatter"> -->
                     <el-table-column prop="status" label="售后单状态" >
                    <template slot-scope="scope">
                      <span v-if="scope.row.status=='10'">待处理</span>
                      <span v-if="scope.row.status=='20'">退货中</span>
                      <span v-if="scope.row.status=='30'">退款中</span>
                      <span v-if="scope.row.status=='40'">已完成</span>
                      <span v-if="scope.row.status=='50'">已拒绝</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="returnAmount" label="售后单申请退款金额"></el-table-column>
                  <el-table-column prop="" label="支付方式"></el-table-column>
                  <el-table-column prop="status" label="退款状态">
                    <template slot-scope="scope">
                      <span v-if="scope.row.status=='10'">待处理</span>
                      <span v-if="scope.row.status=='20'">退货中</span>
                      <span v-if="scope.row.status=='30'">退款中</span>
                      <span v-if="scope.row.status=='40'">已完成</span>
                      <span v-if="scope.row.status=='50'">已拒绝</span>
                      </template>
                  </el-table-column>
                  <el-table-column prop="returnRealAmount" label="实际退款金额"></el-table-column>
                  <el-table-column prop="" label="支付方式"></el-table-column>
                  <el-table-column prop="" label="退款时间"></el-table-column>
                  <el-table-column prop="" label="退款流水号"></el-table-column>
                  <el-table-column prop="" label="第三方平台退款流水号"></el-table-column>
                  <el-table-column prop="" label="退款类型"></el-table-column>
                  <el-table-column prop="returnDistributor" label="退货配送商"></el-table-column>
                  <el-table-column prop="returnNumber" label="退货运单号"></el-table-column>
                  <el-table-column prop="goodsNum" label="退货收货数量"></el-table-column>
                  <el-table-column prop="createTime" label="创建时间"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <kt-button icon="fa fa-search" :label="$t('action.detail')" :size="size" @click="handleDetail(scope.row)" type="success"/>
                      <kt-button icon="fa fa-edit " :label="$t('action.edit')" :size="size" @click="handleEdit(scope.row)"/>
                      <kt-button icon="el-icon-view" v-if="scope.row.status != 1020" :label="$t('action.cancel')" :size="size" @click="handleCancel(scope.row)"/>
                    </template>
                  </el-table-column>
                </el-table>
                <!--操作售后分页-->
              <el-pagination
                layout="total, prev, pager, next, jumper,sizes"
                style="float:right;"
                @current-change="handleCurrentChangeOperationInfo2"
                @size-change="handleSizeChangeOperationInfo2"
                :current-page="afterSalePage.start"
                :page-size="afterSalePage.limit"
                :total="orderAfterSaleApplyTotal"
                :page-sizes="[10, 20, 30, 40]"></el-pagination>
            </el-tab-pane>

            <el-tab-pane name="orderReviewInfo" label="订单评价">
           	 <!--发票信息-->
            <div style="border:1px solid #ccc;margin-bottom:20px">
              <div
                style="background-color:#f0f3f4;text-align:left;padding:10px 20px;font-weight:700;margin-bottom:30px;border-bottom:1px solid #ccc">
                <span>商品名称：商品1&nbsp;&nbsp;&nbsp;商品编码：12345678</span>
              </div>
              <div style="padding:0 0 5px 50px;text-align:left">
                  <el-row style="padding-bottom: 10px">
                    <el-col :span="5">评论时间：2016-08-09 15:56</el-col>
                     <el-col :span="5">商品编号：897498897498</el-col>
                  </el-row>
                   <el-row style="padding-bottom: 10px">
                    <el-col :span="5">评论人账号：13636697164</el-col>
                     <el-col :span="5">商品类目：商品类目名称</el-col>
                  </el-row>
                   <el-row style="padding-bottom: 10px">
                    <el-col :span="5">订单编号：D20399234R1</el-col>
                     <el-col :span="5">商品名称：商品名称</el-col>
                  </el-row>
                   <el-row style="padding-bottom: 10px">
                    <el-col :span="5">置顶状态：否</el-col>
                     <el-col :span="5">审核状态：审核通过</el-col>
                  </el-row>
                   <el-row style="padding-bottom: 10px">
                    <el-col :span="5">审核时间：2016-08-09 15:56</el-col>
                     <el-col :span="5">来源平台：APP</el-col>
                  </el-row>
                   <el-row style="padding-bottom: 10px">
                    <el-col :span="5">商品评分：5</el-col>
                     <el-col :span="5">来源渠道：BBC</el-col>
                  </el-row>
                  <el-row style="padding-bottom: 10px">
                    <el-col :span="10">内容：不错，虽然贵，但很值得啊，哈哈哈哈哈~</el-col>
                  </el-row>
                  <el-row style="padding-bottom: 10px">
                    <el-col :span="2">图片</el-col>
                    <el-col :span="8">
                     <el-image src="src"></el-image>
                     <el-image src="src"></el-image>
                     <el-image src="src"></el-image>
                    </el-col>
                  </el-row>
                  <el-row style="padding-bottom: 10px">
                    <el-col :span="20">客服回复：谢谢你的购买，祝你购物愉快！谢谢你的购买，祝你购物愉快！谢谢你的购买，祝你购物愉快！</el-col>
                  </el-row>
            </div>

             <div style="border:1px solid #ccc;margin-bottom:20px">
              <div style="background-color:#f0f3f4;text-align:left;padding:10px 20px;font-weight:700;margin-bottom:30px;border-bottom:1px solid #ccc">
                <span>商品名称：商品2&nbsp;&nbsp;&nbsp;商品编码：87654321</span>
              </div>
              <div style="padding:0 0 5px 50px;text-align:left">
                  <el-row style="padding-bottom: 10px">
                    <el-col :span="5">评论时间：2016-08-09 15:56</el-col>
                     <el-col :span="5">商品编号：897498897498</el-col>
                  </el-row>
                   <el-row style="padding-bottom: 10px">
                    <el-col :span="5">评论人账号：13636697164</el-col>
                     <el-col :span="5">商品类目：商品类目名称</el-col>
                  </el-row>
                   <el-row style="padding-bottom: 10px">
                    <el-col :span="5">订单编号：D20399234R1</el-col>
                     <el-col :span="5">商品名称：商品名称</el-col>
                  </el-row>
                   <el-row style="padding-bottom: 10px">
                    <el-col :span="5">置顶状态：否</el-col>
                     <el-col :span="5">审核状态：审核通过</el-col>
                  </el-row>
                   <el-row style="padding-bottom: 10px">
                    <el-col :span="5">审核时间：2016-08-09 15:56</el-col>
                     <el-col :span="5">来源平台：APP</el-col>
                  </el-row>
                   <el-row style="padding-bottom: 10px">
                    <el-col :span="5">商品评分：5</el-col>
                     <el-col :span="5">来源渠道：BBC</el-col>
                  </el-row>
                  <el-row style="padding-bottom: 10px">
                    <el-col :span="10">内容：不错，虽然贵，但很值得啊，哈哈哈哈哈~</el-col>
                  </el-row>
                  <el-row style="padding-bottom: 10px">
                    <el-col :span="2">图片</el-col>
                    <el-col :span="8">
                     <el-image src="src"></el-image>
                     <el-image src="src"></el-image>
                     <el-image src="src"></el-image>
                    </el-col>
                  </el-row>
                  <el-row style="padding-bottom: 10px">
                    <el-col :span="20">客服回复：谢谢你的购买，祝你购物愉快！谢谢你的购买，祝你购物愉快！谢谢你的购买，祝你购物愉快！</el-col>
                  </el-row>
            </div>
             </div>
            </div>
            </el-tab-pane>

          <el-tab-pane name="orderNotesInfo" label="订单备注">
           	<el-table :data="remarksData" :size="size" style="width: 100%" align="center" header-align="center" :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
                  <el-table-column prop="remarks" label="备注内容" ></el-table-column>
                  <el-table-column prop="addedBy" label="添加人" ></el-table-column>
                  <el-table-column prop="addTime" label="添加时间"></el-table-column>

                </el-table>
                <!--操作售后分页-->
              <el-pagination
                layout="total, prev, pager, next, jumper,sizes"
                style="float:right;"
                @current-change="handleCurrentChangeOperationInfo2"
                @size-change="handleSizeChangeOperationInfo2"
                :current-page="afterSalePage.start"
                :page-size="afterSalePage.limit"
                :total="orderAfterSaleApplyTotal"
                :page-sizes="[10, 20, 30, 40]"></el-pagination>
            </el-tab-pane>

          <!-- <el-tab-pane name="remarksInfo" label="附件及备注"> -->
            <!--客户备注-->
            <!-- <div style="border:1px solid #ccc;text-align:left">
              <div style="margin:20px 0 10px 200px">
                <span>客户备注：</span>
                <el-input v-model="markQueryData.userMark" placeholder="请输入内容" style="width: 200px"></el-input>
                <el-button @click="saveMarkData" type="primary" size="mini">保存</el-button>
              </div>
              <div style="margin:20px 0 10px 200px">
                <span>商家备注：</span>
                <el-input v-model="markQueryData.merchantMark" placeholder="请输入内容" style="width: 200px"></el-input>
                <el-button @click="saveMarkData" type="primary" size="mini">保存</el-button>
              </div>
              <div style="margin:20px 0 10px 200px">
                <span>平台备注：</span>
                <el-input v-model="markQueryData.deptMark" placeholder="请输入内容" style="width: 200px"></el-input>
                <el-button @click="saveMarkData" type="primary" size="mini">保存</el-button>
              </div>
              <div style="margin:20px 0 10px 200px">
                <span>附件：</span>
                <div style="margin-left: 90px;margin-top: -30px;width: 250px;">
                  <el-upload class="upload-demo"
                             :action="imgUpload"
                             :file-list="fileList"
                             :on-success="handleSuccess"
                             :on-remove="handleRemove"
                             :on-preview="handlePreview"
                             :limit="3"
                             multiple>
                    <el-button size="small" type="primary">添加附件</el-button>
                  </el-upload>
                </div>
              </div>
            </div> -->

            <!--订单取消-->
            <!-- <div style="border:1px solid #ccc;margin-bottom:20px">
              <div
                style="background-color:#f0f3f4;text-align:left;padding:10px 20px;font-weight:700;margin-bottom:30px;border-bottom:1px solid #ccc">
                <span>订单取消</span>
              </div>
              <div style="padding:0 0 20px 100px;text-align:left">
                <div style="margin-bottom:20px">
                  <span>订单取消时间：</span>
                  <span>{{orderClosedInfoQueryInfo.closeTime }}</span>
                </div>
                <div style="margin-bottom:20px">
                  <span>订单取消人：</span>
                  <span>{{orderClosedInfoQueryInfo.closer}}</span>
                </div>
                <div style="margin-bottom:20px">
                  <span>订单取消原因：</span>
                  <span>{{orderClosedInfoQueryInfo.reason}}</span>
                </div>
              </div>
            </div> -->
          <!-- </el-tab-pane> -->

          <el-tab-pane name="operationInfo" label="操作日志">
            <!--操作日志列表-->
            <el-table :data="orderProcessLogData" style="width: 100%"
                      :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
                      :size="size"
                      align="center"
                      header-align="center"
                      stripe>
              <el-table-column prop="operatorTime" label="操作时间"></el-table-column>
              <el-table-column prop="operatorName" label="操作人"></el-table-column>
              <el-table-column prop="operatorLog" label="操作日志"></el-table-column>
            </el-table>

            <!--操作日志分页-->
            <el-pagination
              layout="total, prev, pager, next, jumper,sizes"
              style="float:right;"
              @current-change="handleCurrentChangeOperationInfo"
              @size-change="handleSizeChangeOperationInfo"
              :current-page="orderProcessLogPage.start"
              :page-size="orderProcessLogPage.limit"
              :total="orderProcessLogTotal"
              :page-sizes="[10, 20, 30, 40]"></el-pagination>
          </el-tab-pane>
        </el-tabs>

        <el-dialog title="发票" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="发票类型" >
              <el-row>
                <el-col :span="8">
                  <el-radio type="danger" v-model="radio1" label="1" border>增值税电子发票</el-radio>
                </el-col>
                 <el-col :span="8">
                    <el-radio type="danger" v-model="radio1" label="2" border>增值税纸质发票</el-radio>
                 </el-col>
              </el-row>
            </el-form-item>
              <el-divider></el-divider>
            <el-form-item label="抬头类型">
                <el-row>
                <el-col :span="8">
                  <el-radio type="danger" v-model="person" label="1" border>个人</el-radio>
                </el-col>
                 <el-col :span="8">
                    <el-radio type="danger" v-model="company" label="2" border>企业</el-radio>
                 </el-col>
              </el-row>
            </el-form-item>
               <el-divider></el-divider>
               <!--  增值税电子发票 -->
              <div>
                  <el-form-item label="发票抬头" v-show="radio1=1">
                      <el-input v-model="form.name" placeholder="" style="width:80%"></el-input>
                  </el-form-item>
                    <el-form-item label="发票内容">
                      <el-input v-model="form.name" placeholder="" style="width:80%"></el-input>
                  </el-form-item>
                    <el-form-item label="发票邮箱">
                      <el-input v-model="form.name" placeholder="" style="width:80%"></el-input>
                  </el-form-item>
              </div>
             <!--  增值税纸质发票 -->
              <div>
                  <el-form-item label="发票抬头" v-show="radio1=2">
                      <el-input v-model="form.name" placeholder="" style="width:80%"></el-input>
                  </el-form-item>
                    <el-form-item label="税号">
                      <el-input v-model="form.name" placeholder="" style="width:80%"></el-input>
                  </el-form-item>
                    <el-form-item label="开户银行">
                      <el-input v-model="form.name" placeholder="" style="width:80%"></el-input>
                  </el-form-item>
                     <el-form-item label="银行账号">
                      <el-input v-model="form.name" placeholder="" style="width:80%"></el-input>
                  </el-form-item>
                     <el-form-item label="企业地址">
                      <el-input v-model="form.name" placeholder="" style="width:80%"></el-input>
                  </el-form-item>
                     <el-form-item label="企业电话">
                      <el-input v-model="form.name" placeholder="" style="width:80%"></el-input>
                  </el-form-item>
              </div>
          </el-form>
          <div >
             <el-button type="primary" @click="dialogFormVisible = false">保存</el-button>
            <el-button @click="dialogFormVisible = false">关闭</el-button>
          </div>
        </el-dialog>
      </el-row>
    </div>
  </div>
</template>

<script>
import orderDetailPay from "./OrderDetailPay";
import orderDetailLogistics from "./OrderDetailLogistics";
import orderDetailProduct from "./OrderDetailProduct";
import orderDetailAfterSale from "./OrderDetailAfterSale";
import VDistpicker from "v-distpicker";
export default {
  components: {
    orderDetailPay,
    orderDetailLogistics,
    orderDetailProduct,
    orderDetailAfterSale,
    VDistpicker
  },

  data() {
    return {
      person:0,
      company:1,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogFormVisible:false,
      radio1:1,
      imgUpload: "http://139.217.220.198:8094/api/upload",
      fileList: [], //附件
      size: "small",
      activeName: "productInfo",
      orderNo: this.$route.params.orderNo,
      form:[],//
      productCode: "",
      orderDetail: {}, // 订单详情
      orderGoodsPage: {
        orderNo: "",
        limit: 10,
        start: 1
      },
      // form:{
      //   buyerRealname:null,
      //   consigneePhone:null,
      // },                                        // 商品明细
      orderGoodsTotal: 0,
      productDetailsData: [], // 商品明细列表
      deliverData: [], // 交货单信息
      invoiceProductInfo: [], // 发票信息- 商品信息
      orderInvoiceInfo: {
        invoiceReceiverName: "",
        invoiceReceiverPhone: "",
        invoiceReceiverAddress: "",
        invoiceWay: "",
        invoiceType: "",
        invoiceTitle: "",
        invoiceTaxId: "",
        registerAddress: "",
        registerPhone: "",
        openAccountBank: "",
        bankNo: "",
        invoiceContent: "",
        invoiceStatus: "",
        invoiceNo: ""
      }, // 发票信息- 收票人信息和发票信息
      markQueryData: {
        id: "",
        userMark: "",
        merchantMark: "",
        deptMark: "",
        attachUrl: ""
      },
      rules: {}, // 附件及备注
      orderClosedInfoQueryInfo: {}, // 附件及备注 - 订单取消
      orderProcessLogData: [],
      afterSaleData: [], //售后
      /*     remarksData:[],//订单备注 */
      remarksData: [
        {
          remarks: "备注一下！",
          addedBy: "阿波罗",
          addTime: "2020-10-22  19:12:20"
        }
      ], //订单备注 // 操作日志paymentPreference
      /*  orderPayDetailData: [],  */ orderPayDetailData: [
        {
          payWay: "微信支付",
          payAmount: "￥100.00",
          paymentPreference: "￥99.99",
          payAskTime: "2018-12-19 14:37:59",
          payAskNo: "12192076087100000050"
        }
      ],
      orderProcessLogTotal: 0,
      orderPayDetailTotal: 0,
      orderAfterSaleApplyTotal: 0,
      orderProcessLogPage: {
        start: 1,
        limit: 10,
        orderNo: ""
      },
      orderPayDetailPage: {
        start: 1,
        limit: 10,
        orderPayNo: ""
      },
      afterSalePage: {
        start: 1,
        limit: 10,
        orderNo: ""
      }
    };
  },

  mounted() {
    this.orderNo = this.$route.params.orderNo;
    this.orderPayNo = this.$route.params.orderNo;
    this.getOrderDetail();
  },

  methods: {
    changeProvince(data) {
      this.orderDetail.addressProvinceId = data.code;
      this.orderDetail.receiverProvinceName = data.value;
    },
    changeCity(data) {
      this.orderDetail.addressCityId = data.code;
      this.orderDetail.receiverCityName = data.value;
    },
    changeArea(data) {
      this.orderDetail.addressAreaId = data.code;
      this.orderDetail.receiverRegionName = data.value;
    },
    //  tab点击切换
    handleClick() {
      switch (this.activeName) {
        case "deliveryInfo":
          this.deliverManagerQueryPage();
          break;
        case "invoiceInfo":
          this.invoiceQuery();
          break;
        case "remarksInfo":
          this.markQuery();
          this.orderClosedInfoQuery();
          break;
        case "operationInfo":
          this.orderProcessLogQuery();
          break;
        case "payInfo":
          this.orderPayDetailQuery();
          break;
        case "afterSaleInfo":
          this.orderAfterSaleApplyQuery();
          break;
        default:
          break;
      }
    },
    // 订单详情
    getOrderDetail() {
      let this_ = this;
      this_.utils.request.getOrderDetail({ orderNo: this_.orderNo }, function(res) {
        if (res.code == "0000") {
          this_.orderDetail = res.data;
        } else {
          this_.orderDetail = {};
        }
      });
    },

    // 交货单信息
    deliverManagerQueryPage() {
      let this_ = this;
      let params = {
        start: 1,
        limit: 20,
        orderNo: this_.orderNo
      };
      this_.utils.request.deliverManagerQueryPage(params, function(res) {
        if (res.code == "0000") {
          this_.deliverData = res.data.rows;
        }
      });
    },

    // 发票信息详情
    invoiceQuery() {
      let this_ = this;
      this_.utils.request.invoceQuery({ orderNo: this_.orderNo }, function(
        res
      ) {
        if (res.data) {
          this_.orderInvoiceInfo = res.data;
        }
      });
    },

    // 附件及备注查询
    markQuery() {
      let this_ = this;
      this_.utils.request.markQuery({ orderNo: this_.orderNo }, function(res) {
        if (res.data) {
          this_.markQueryData = res.data;
          this_.fileList = [];
          if (res.data.attachUrl != "" && res.data.attachUrl != null) {
            let urlArray = res.data.attachUrl.split(",");
            urlArray.forEach((item, index) => {
              if (item != "") {
                let obj = {};
                obj.imgUrl = item;
                obj.name = "附件" + (index + 1);
                this_.fileList.push(obj);
              }
            });
          }
        }
      });
    },
    modificationConsigneeForm() {
      this.dialogVisible = true;
    },

    modificationPredictDeliveryTimeForm() {
      this.dialogVisible1 = true;
    },
    modificationExternalOrderCodeForm() {
      this.dialogVisible2 = true;
    },
    // 附件下载查看
    handlePreview: function(file) {
      window.open(file.imgUrl);
    },

    // 附件移除回调
    handleRemove: function(file, fileList) {
      this.fileList = fileList;
      this.saveMarkData();
    },

    // 附件上传成功回调
    handleSuccess: function(res, file) {
      let obj = {};
      obj.imgUrl = res.data.imgUrl;
      obj.name = file.name;
      this.fileList.push(obj);
      this.saveMarkData();
    },

    // 订单备注保存
    saveMarkData: function() {
      let this_ = this;
      let param = this.markQueryData;
      param.orderNo = this_.orderNo;
      if (this_.fileList.length > 0) {
        let attachUrl = "";
        this_.fileList.forEach(item => {
          attachUrl += item.imgUrl + ",";
        });
        param.attachUrl = attachUrl;
      }
      this_.utils.request.saveMarkData(param, function(res) {
        if (res.code == "0000") {
          if (res.code == "0000") {
            this_.$message({ message: "操作成功", type: "success" });
            this_.markQuery();
          } else {
            this_.$message({ message: "操作失败, " + res.msg, type: "error" });
          }
        }
      });
    },
    summitModificationConsigneeForm(num) {
      let this_ = this;
      this_.dialogVisible = false;
      this_.$message({ message: "操作成功", type: "success" });
    },
    // 订单的取消信息查询
    orderClosedInfoQuery() {
      let this_ = this;
      this_.utils.request.orderClosedInfoQuery(
        { orderNo: this_.orderNo },
        function(res) {
          if (res.data) {
            this_.orderClosedInfoQueryInfo = res.data;
          }
        }
      );
    },

    // 订单操作日志
    orderProcessLogQuery() {
      let this_ = this;
      this_.orderProcessLogPage.orderNo = this_.orderNo;
      this_.utils.request.orderProcessLogQuery(
        this_.orderProcessLogPage,
        function(res) {
          if (res.code == "0000") {
            this_.orderProcessLogData = res.data.rows;
            this_.orderProcessLogTotal = Number(res.data.total);
          }
        }
      );
    },
    // 订单售后信息
    orderAfterSaleApplyQuery() {
      let this_ = this;
      this_.afterSalePage.orderNo = this_.orderNo;
      this_.utils.request.orderAfterSaleApplyQuery(
        this_.afterSalePage,
        function(res) {
          if (res.code == "0000") {
            this_.afterSaleData = res.data.rows;
            this_.orderAfterSaleApplyTotal = Number(res.data.total);
          }
        }
      );
    },
    // 订单支付信息
    orderPayDetailQuery() {
      let this_ = this;
      this_.orderPayDetailPage.orderPayNo = this_.orderNo;
      this_.utils.request.orderPayDetailQuery(
        this_.orderPayDetailPage,
        function(res) {
          /*  if (res.code == "0000") {
            this_.orderPayDetailData = res.data.rows;
            this_.orderPayDetailTotal = Number(res.data.total);
          } */
        }
      );
    },

    // 订单操作日志分页
    handleSizeChangeOperationInfo(val) {
      this.orderProcessLogPage.start = 1;
      this.orderProcessLogPage.limit = val;
      this.orderProcessLogQuery();
    },
    handleCurrentChangeOperationInfo(val) {
      this.orderProcessLogPage.start = val;
      this.orderProcessLogQuery();
    },
    // 订单操作日志分页
    handleSizeChangeOperationInfo1(val) {
      this.orderPayDetailPage.start = 1;
      this.orderPayDetailPage.limit = val;
      this.orderPayDetailQuery();
    },
    handleCurrentChangeOperationInfo1(val) {
      this.orderPayDetailPage.start = val;
      this.orderPayDetailQuery();
    },
    // 订单售后分页
    handleSizeChangeOperationInfo2(val) {
      this.afterSalePage.start = 1;
      this.afterSalePage.limit = val;
      this.orderAfterSaleApplyQuery();
    },
    handleCurrentChangeOperationInfo2(val) {
      this.afterSalePage.start = val;
      this.orderAfterSaleApplyQuery();
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  .pageContainer {
    background-color: #f0f3f4;

    .basicOrderInformation {
      margin-bottom: 20px;
      border: 1px solid #ccc;
      background-color: #fff;
      padding: 10px 0 10px 0;
      font-size: 16px;
      overflow: hidden;

      .orderIndex {
        float: left;
      }

      .orderIndexList {
        text-align: left;
        margin-bottom: 10px;
        padding-left: 90px;
      }
    }

    .orderDetails {
      border: 1px solid #ccc;
      background-color: #fff;

      .settlementDetails {
        text-align: left;
        margin-bottom: 10px;
        padding-left: 90px;
      }
    }
  }
}
</style>
